<template>
  <Page name="添加对接人">
    <!-- <ui-loading v-if="initLoading" class="page-init-loading">
      <div slot="content"></div>
    </ui-loading>-->
    <div class="dock">
      <ui-empty :empty="empty" v-if="list.length==0"></ui-empty>
      <p class="add-title">对接人角色</p>
      <ul>
        <li
          v-for="(item,index) in list"
          :key="index"
          :data-type="item.type"
          :data-id="item.id"
          :data-name="item.name"
          :id="setAccountId(index)"
          @click="chooseDocking($event, item, index)"
        >
          <p class="labels">
            <span class="item-title">{{item.name}}</span>
            <i class="item-circle">
              <span class="item-dot"></span>
            </i>
          </p>
        </li>
      </ul>
      <p class="add-title">邀请会员成为您的对接人</p>
      <div class="invite-list">
        <div class="invite-item" @click="invite('sms')">
          <i class="sms"></i>
          <span>通过手机短信邀请</span>
        </div>
        <!-- <div class="invite-item" @click="invite('wechat')">
          <i class="wechat"></i>
          <span>通过微信邀请</span>
        </div>
        <div class="invite-item" @click="invite('qq')">
          <i class="qq"></i>
          <span>通过QQ邀请</span>
        </div>-->
        <div class="invite-item" @click="invite('mail')">
          <i class="mail"></i>
          <span>通过邮箱邀请</span>
        </div>
        <div class="invite-item" @click="invite('potato')">
          <i class="potato"></i>
          <span>通过Potato邀请</span>
        </div>
      </div>
    </div>
    <div class="current-tips" :class="{show: isShowCurrentTips}">
      <div class="current-cont">
        <p class="tips-title">{{inviteTips}}</p>
        <input
          id="phone"
          type="text"
          maxlength="15"
          v-model="phone"
          @keyup="keyInput"
          :placeholder="returnTips"
        >
        <div class="phone-item-code" @click="changeCode">
          <span>+{{code}}</span>
          <i class="css-arrow-down"></i>
        </div>
        <div class="current-button">
          <div class="button-left">
            <span @click="inviteCancel">取消</span>
          </div>
          <div class="button-right">
            <span class="invite-send" :class="{active: showPhone}" @click="inviteSend">发送邀请</span>
          </div>
        </div>
      </div>
    </div>
    <div class="current-tips" :class="{active: isShowInviteTips}">
      <div class="current-cont">
        <!-- 请输入对方邮箱帐号，并发送邀请 -->
        <p class="tips-title">请提供对方邮箱账号，系统将为您发送邀请</p>
        <!-- maxlength="15" -->
        <input id="email" type="text" @keyup="keyInput2" placeholder="请输入对方email帐号">
        <div class="current-button">
          <div class="button-left">
            <span class="b-cancel" @click="inviteCancel2">取消</span>
          </div>
          <div class="button-right">
            <span class="invite-send b-send" v-show="!showEmail">发送邀请</span>
            <!-- <a :href="email" v-show="showEmail" @click="inviteSend2">发送邀请</a> -->
            <a href="javascript:void(0)" v-show="showEmail" @click="inviteSend2">发送邀请</a>
          </div>
        </div>
      </div>
    </div>
  </Page>
</template>

<script>
import Page from "~/components/page";
import UILoading from "~/components/loading";
import UiEmpty from "~/components/empty";
export default {
  components: {
    Page,
    [UILoading.name]: UILoading,
    UiEmpty
  },
  data() {
    return {
      test_data: {
        code: 0,
        timestamp: 1546856748,
        msg: "OK",
        data: {
          list: [
            {
              id: "1",
              name: "超级管理员",
              type: "0"
            },
            {
              id: "2",
              name: "财务对接人",
              type: "1"
            },
            {
              id: "3",
              name: "服务对接人",
              type: "2"
            },
            {
              id: "4",
              name: "负责人",
              type: "3"
            },
            {
              id: "5",
              name: "授信对接人",
              type: "3"
            }
          ],
          state: "1"
        },
        token: "171498cf4f27dd3de3ed7c6ab6641bd4"
      },
      isShowCurrentTips: false,
      isShowInviteTips: false,
      showEmail: false,
      showPhone: false,
      tab: "sms",
      people: [],
      list: [],
      empty: {
        text: "暂无数据"
      },
      code: "855",
      phone: "",
      email_data: null,
      email: ""
    };
  },
  asyncData(context) {
    const { store, route, query } = context;
    let rs = {
      isShowCurrentTips: false,
      isShowInviteTips: false,
      showEmail: false,
      showPhone: false,
      tab: "sms",
      people: [],
      phone: "",
      code: "855"
    };
    // 为了保证从区号选择返回是能带回之前的表单数据
    if (route.params.country && route.params.data) {
      rs = route.params.data;
      rs.code = route.params.country.code;
    }
    return rs;
  },
  computed: {
    getTab() {
      return this.$store.state.addDockingPeople.tab;
    },
    getIsShowCurrentTips() {
      return this.$store.state.addDockingPeople.isShowCurrentTips;
    },
    getPeople() {
      return this.$store.state.addDockingPeople.people;
    },
    inviteTips() {
      let str = "";
      switch (this.tab) {
        case "sms":
          str = "请提供对方手机号码，系统将为您发送邀请";
          break;
        case "wechat":
          str = "启动微信app失败，若您未安装微信app，请安装后再发送邀请";
          break;
        case "qq":
          str = "启动手机QQ失败，若您未安装手机QQ，请安装后再发送邀请";
          break;
        case "mail":
          str = "请提供对方邮箱账号，系统将为您发送邀请";
          break;
        case "potato":
          str = "请提供对方Potato号码，系统将为您发送邀请";
          break;
        default:
          break;
      }
      return str;
    },
    returnTips() {
      let str = "";
      switch (this.tab) {
        case "sms":
          str = "请输入对方手机号码";
          break;
        case "wechat":
          str = "请输入对方微信帐号";
          break;
        case "qq":
          str = "请输入对方QQ帐号";
          break;
        case "mail":
          str = "请输入对方email帐号";
          break;
        case "potato":
          str = "请输入对方potato帐号";
          break;
        default:
          break;
      }
      return str;
    }
  },
  mounted() {
    this.tab = this.getTab;
    this.isShowCurrentTips = this.getIsShowCurrentTips;
    (async () => {
      await this.contact_ways();
    })();

    this.$nextTick(() => {
      let _arr = this.people.concat(this.getPeople);
      this.people = this.$utils.uniqArray2(_arr);
      let ele = document.getElementsByClassName("item-circle");
      if (ele.length > 0 && this.people.length > 0) {
        Array.prototype.forEach.call(ele, (element, index, array) => {
          // console.log(element.getAttribute("data-id"));
          this.people.forEach((el, ind, arr) => {
            if (el == element.dataset.id) {
              element.className = "item-circle active";
              return;
            }
          });
        });
      }
    });
  },
  methods: {
    async contact_ways() {
      try {
        let { data: rs } = await this.$axios.post("?ct=api&ac=contact_ways");
        if (rs.code == 0) {
          const { data } = rs;
          this.list = data.list;
          // this.list =
          // data.list.length > 0 ? data.list : this.test_data.data.list; //test
        } else {
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }
    },
    async invite_send() {
      let obj = {};
      obj.groups = this.people.join(",");
      switch (this.tab) {
        case "sms":
          obj.by = "1";
          obj.account = this.code + "" + this.phone;
          break;
        case "mail":
          obj.by = "2";
          obj.account = this.email;
          break;
        case "potato":
          obj.by = "3";
          obj.account = this.code + "" + this.phone;
          break;
        default:
          break;
      }
      obj.account = obj.account.replace(/\s/g, "");
      if (this.tab == "sms" || this.tab == "potato") {
        document.getElementById("phone").value = "";
        this.phone = "";
        this.showPhone = false;
      }
      try {
        let { data: rs } = await this.$axios.post(
          "?ct=api&ac=invite_send",
          obj
        );
        if (rs.code == 0) {
          const { data } = rs;
          if (rs.data.state > 0) {
            this.$alert({
              title: "发送邀请成功"
            }).then(() => {});
          }
        } else {
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }
    },
    async invite_url() {
      let obj = {};
      obj.groups = this.people.join(",");
      try {
        let { data: rs } = await this.$axios.post("?ct=api&ac=invite_url", obj);
        if (rs.code == 0) {
          const { data } = rs;
          //短信
          //<a href="sms:10086">发送</a>
          if (this.tab == "mail") {
            this.email_data = data;
            //"mailto:863139978@qq.com?subject=邮件主题"
            //"mailto:863139978@qq.com?body=邮件主题内容%0A腾讯诚信%0A期待您的到来"
            //"mailto:863139978@qq.com?body=<img src='images/1.jpg' />"
            //"mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />"
            this.isShowInviteTips = true; //test
          }
        } else {
          this.$toast(rs.msg);
        }
      } catch (e) {
        this.$error(e);
      }
    },

    changeCode() {
      let rs = {
        isShowCurrentTips: this.isShowCurrentTips,
        isShowInviteTips: this.isShowInviteTips,
        showEmail: this.showEmail,
        showPhone: this.showPhone,
        tab: this.tab,
        people: this.people,
        phone: this.phone,
        code: this.code
      };
      //修改联系方式的area_code
      this.$router.push({
        name: "area_list",
        query: { from: this.$route.name },
        params: {
          from: this.$route.name,
          data: rs
        }
      });
    },
    inviteCancel() {
      document.getElementById("phone").value = "";
      this.phone = "";
      this.showPhone = false;
      this.isShowCurrentTips = false;
      this.$store.commit("addDockingPeople/SET_isShowCurrentTips", false);
    },
    keyInput(e) {
      let value = e.target.value;
      value = value.trim();
      value = this.clearNoNum(value);
      this.phone = value;
      if (value == "") {
        this.showPhone = false;
      } else {
        this.showPhone = true;
      }
    },
    clearNoNum(value) {
      //修复第一个字符是小数点 的情况.
      if (value != "" && value.substr(0, 1) == ".") {
        value = "";
      }
      value = value.replace(/^0*(0\.|[1-9])/, "$1"); //解决 粘贴不生效
      value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      value = value
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
      if (value.indexOf(".") < 0 && value != "") {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        if (value.substr(0, 1) == "0" && value.length == 2) {
          value = value.substr(1, value.length);
        }
      }
      return value;
    },
    inviteSend() {
      if (!this.showPhone) return;
      this.isShowCurrentTips = false;
      this.$store.commit("addDockingPeople/SET_isShowCurrentTips", false);
      this.invite_send();
    },
    inviteCancel2() {
      document.getElementById("email").value = "";
      this.showEmail = false;
      this.isShowInviteTips = false;
    },
    keyInput2(e) {
      //var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      //var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
      //var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      //正则表达式
      var reg = new RegExp(
        "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
      );
      let value = e.target.value;
      value = value.trim();
      if (value == "") {
        this.showEmail = false;
      } else if (!reg.test(value)) {
        this.showEmail = false;
      } else {
        this.email = value;
        // this.email =
        //   "mailto:" +
        //   value +
        //   "?subject=" +
        //   this.email_data.subject +
        //   "&body=" +
        //   this.email_data.content +
        //   "%0A%0A" +
        //   this.email_data.url +
        //   "%0A%0A<img src='" +
        //   this.email_data.logo +
        //   "' />";
        this.showEmail = true;
      }
    },
    inviteSend2() {
      if (!this.showEmail) return;
      document.getElementById("email").value = "";
      this.showEmail = false;
      this.isShowInviteTips = false;
      this.invite_send();
    },
    setAccountId(index) {
      return "account" + index;
    },
    chooseDocking(e, item, ind) {
      let _target = document.getElementById("account" + ind);
      let _id = _target.getAttribute("data-id");
      // let _type = _target.getAttribute("data-type");
      // let _name = _target.getAttribute("data-name");
      let _show = _target.className == "item-circle active";
      _target.className = _show ? "item-circle" : "item-circle active";
      if (_show) {
        this.people.forEach((element, index, array) => {
          if (element == _id) {
            array.splice(index, 1);
            return;
          }
        });
      } else {
        this.people.push(_id);
      }
      let _arr = this.people.concat([]);
      console.log(this.people);
      this.$store.commit("addDockingPeople/SET_people", _arr);
    },
    invite(title) {
      if (this.people.length < 1) {
        this.$alert({
          title: "请选择对接人"
        }).then(() => {});
        return;
      }
      this.tab = title;
      this.$store.commit("addDockingPeople/SET_tab", title);
      let isReturn = false;
      if (title == "mail") {
        isReturn = true;
        this.isShowInviteTips = true;
        // this.invite_url();
      } else if (title == "qq") {
        isReturn = true;
        this.$alert({
          title: "暂不支持QQ分享"
        }).then(() => {});
      } else if (title == "wechat") {
        isReturn = true;
        this.$alert({
          title: "暂不支持微信分享"
        }).then(() => {});
      }
      if (isReturn) return;
      this.isShowCurrentTips = true;
      this.$store.commit("addDockingPeople/SET_isShowCurrentTips", true);
    }
  }
};
</script>

<style lang="less" scoped>
.dock {
  .add-title {
    margin-left: 30px;
    line-height: 52px;
    font-family: "PingFangSC-Regular";
    font-size: 24px;
    color: #666;
  }
  ul {
    background: #fff;
    li {
      .labels {
        margin-left: 30px;
        padding-top: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
        border-bottom: 2px solid #ededed;
        .item-title {
          font-family: "PingFangSC-Regular";
          font-size: 30px;
          color: #292929;
        }
        .item-circle {
          display: block;
          float: right;
          margin-top: 4px;
          width: 36px;
          height: 36px;
          border: 2px solid #ededed;
          border-radius: 36px;
          .item-dot {
          }
        }
      }
    }
    li.active {
      .labels {
        .item-circle {
          border: 2px solid #2086f9;
          .item-dot {
            position: absolute;
            display: block;
            margin-left: 6px;
            margin-top: 6px;
            width: 20px;
            height: 20px;
            background-color: #2086f9;
            border-radius: 20px;
          }
        }
      }
    }
    li:last-child .labels {
      border-bottom: 0;
    }
  }
  .invite-list {
    background: #fff;
    .invite-item {
      display: flex;
      margin-left: 30px;
      border-bottom: 2px solid #ededed;
      i {
        margin-top: 20px;
        margin-bottom: 20px;
        height: 80px;
        width: 80px;
      }
      i.sms {
        background: url("~assets/img/sms.png") no-repeat;
        background-size: 80px 80px;
      }
      i.wechat {
        background: url("~assets/img/wechat.png") no-repeat;
        background-size: 80px 80px;
      }
      i.qq {
        background: url("~assets/img/qq.png") no-repeat;
        background-size: 80px 80px;
      }
      i.mail {
        background: url("~assets/img/email.png") no-repeat;
        background-size: 80px 80px;
      }
      i.potato {
        background: url("~assets/img/potato.png") no-repeat;
        background-size: 80px 80px;
      }
      span {
        align-self: center;
        margin-left: 30px;
        font-family: "PingFangSC-Regular";
        font-size: 30px;
        color: #292929;
      }
    }
    .invite-item:last-child {
      border-bottom: 0;
    }
  }
}

.current-tips {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2000;
  .current-cont {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -270px;
    margin-top: -170px;
    height: 340px;
    width: 540px;
    text-align: center;
    font-size: 28px;
    font-family: "PingFangSC-Regular";
    color: rgb(41, 41, 41);
    background-color: #fff;
    border-radius: 16px;
    .tips-title {
      margin-top: 40px;
      padding-left: 30px;
      padding-right: 30px;
      margin-bottom: 20px;
    }
    input {
      position: absolute;
      line-height: 70px;
      left: 30px;
      bottom: 116px;
      width: calc(100% - 60px);
      text-indent: 120px;
      font-size: 30px;
      border: 2px solid #ededf0;
      border-radius: 8px;
    }
    .phone-item-code {
      display: flex;
      align-items: center;
      position: absolute;
      line-height: 70px;
      left: 30px;
      bottom: 118px;
      width: 120px;
      span {
        text-indent: 12px;
      }
      i.css-arrow-down {
        margin-left: 12px;
      }
    }
    .current-button {
      display: flex;
      position: absolute;
      bottom: 0;
      width: 100%;
      line-height: 86px;
      font-size: 34px;
      // border-top: 2px solid #ededf0;
      .button-left {
        flex: 1;
        span {
          // display: block;
          // color: #2086f9;
          padding: 10px 30px;
          border: 2px solid #ededf0;
          border-radius: 8px;
        }
      }
      .button-right {
        flex: 1;
        text-align: left;
        // border-left: 2px solid #ededf0;
        .invite-send {
          opacity: 0.5;
          padding: 10px 30px;
          color: #fff;
          background-color: #2086f9;
          border-radius: 8px;
        }
        .invite-send.active {
          opacity: 1;
        }
      }
    }
  }
}
.current-tips.show {
  display: block;
}
.current-tips.active {
  display: block;
  .current-cont {
    .tips-title {
    }
    input {
      text-indent: 12px;
    }
    .current-button {
      .button-left {
        span.b-cancel {
        }
      }
      .button-right {
        .invite-send.b-send {
          opacity: 0.5;
        }
        a {
          padding: 10px 30px;
          color: #fff;
          background-color: #2086f9;
          border-radius: 8px;
        }
      }
    }
  }
}
</style>
